import React,{ useEffect } from 'react';
import { Form, Input, Select } from 'antd';
import { connect } from 'umi';


const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};

const names = {
  name1: 'dataSourceType',
  name2: 'dataSourceName',
  name3: 'dataSourceDesc', //描述
  name4: 'dataSourceJdbcDriver', //驱动
  name5: 'dataSourceUrlOther', //连接
  name6: 'dataSourceHost', //服务ip
  name7: 'dataSourcePort', //端口号
  name8: 'databaseName', //数据库名
  name9: 'dataSourceUsername',
  name10: 'dataSourcePassword',
};
var dataPop = props => {
  const [form] = Form.useForm();
  const myRef = React.useRef();
  var disabled = true;


  useEffect(() => {
    const {
      dataPop, //接口调用数据返回数据源详情
    } = props.MyRole;
    if(dataPop.length!==0){
      form.setFieldsValue(dataPop);
    }
    
  });


  return (
    <div style={{boxSizing:'border-box',paddingRight:"24px"}}>
  
      <Form {...formItemLayout} form={form}>
        <Form.Item
          name={names.name1}
          label="数据源类型"
          rules={[{ required: true, message: '请填写数据源类型' }]}
        >
          <Input disabled={disabled}></Input>
        </Form.Item>
        <Form.Item
          name={names.name2}
          label="数据源名称"
          rules={[{ required: true }]}
        >
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item name={names.name3} label="描述">
          <Input.TextArea disabled={disabled} />
        </Form.Item>
        <Form.Item
          name={names.name4}
          label={<span className={'must'}>驱动字符串</span>}
        >
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item name={names.name5} label="连接参数">
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item
          name={names.name6}
          label={<span className={'must'}>服务ip</span>}
        >
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item
          name={names.name7}
          label={<span className={'must'}>服务端口号</span>}
        >
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item
          name={names.name8}
          label={<span className={'must'}>默认数据库名</span>}
        >
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item
          name={names.name9}
          label="用户名"
          rules={[{ required: true }]}
        >
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item
          name={names.name10}
          label="密码"
          rules={[{ required: true, message: '密码必须输入' }]}
        >
          <Input ref={myRef} type="password" disabled={disabled} />
        </Form.Item>
      </Form>

    </div>
  );
};
export default connect(({ MyRole }) => ({ MyRole }))(dataPop);
